<template>
    <transition name="move">
        <div class="mineTicket" v-show="mineTicketFlag">
            <m-title :title="title" :returnShow="returnShow" @clickHide="hide"></m-title>
            <scroll class="mine-ticket-container" :data="ticketList">
                <div>
                    <ul class="mine-ticket-item">
                        <li class="mine-ticket-list" v-for="(item,index) in ticketList" :key="index" @click="mineTicketDetailShow(item.id)">
                            <div class="list-wrap">
                                <div class="list-main">
                                    <div class="left">
                                        <div class="left-img"></div>
                                    </div>
                                    <div class="middle">
                                        <p class="middle-title">{{item.title}}</p>
                                        <p class="middle-desc">
                                            <span class="startTime">{{item.startTime}}</span>
                                            至
                                            <span class="endTime">{{item.endTime}}</span>
                                        </p>
                                    </div>
                                    <div class="right">
                                        <div class="right-img"></div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </scroll>
            <mine-ticket-detail ref="ticketDetailFlag" :ticketDetailList="ticketDetailList"></mine-ticket-detail>
        </div>
    </transition>
</template>

<script>
    import axios from 'axios'
    import MTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    import MineTicketDetail from 'pages/mine/components/mine-ticket/mineTicketDetail'
    export default {
        data () {
            return {
                title: '我的门票',
                mineTicketFlag: false,
                returnShow: true,
                ticketList: [],
                ticketDetailList: {}
            }
        },
        methods: {
            show () {
                this.mineTicketFlag = true
            },
            hide () {
                this.mineTicketFlag = false
            },
            mineTicketDetailShow (id) {
                this.$refs.ticketDetailFlag.show()
                axios.get('./static/ticketDetail.json', {
                    params: {
                        id: id
                    }
                }).then((res) => {
                    res = res.data.data
                    this.ticketDetailList = res.ticketDetailList[0]
                })
            },
            getTicketInfo () {
                axios.get('./static/ticket.json').then((res) => {
                    res = res.data.data
                    this.ticketList = res.ticketList
                })
            }
        },
        components: {MTitle,Loading,Scroll,MineTicketDetail},
        created() {
            this.getTicketInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .mineTicket
        background: #f0eff5
        width: 100%
        height: 100%
        position: fixed
        overflow: hidden
        top: 0
        left: 0
        padding-top: 10px
        box-sizing: border-box
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        .mine-ticket-container
            position: absolute
            top: 54px
            width: 100%
            padding: 0 15px
            box-sizing: border-box
            bottom: 0
            overflow: hidden
            .loading-wrapper
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
                z-index: 9
            .mine-ticket-item
                width: 100%
                .mine-ticket-list
                    width: 100%
                    height: 114px
                    background: #fff
                    padding: 6px
                    box-sizing: border-box
                    margin-bottom: 10px
                    .list-wrap
                        width: 100%
                        height: 100%
                        border: 1px solid #7fc9e9
                        box-sizing: border-box
                        padding: 6px
                        .list-main
                            width: 100%
                            height: 100%
                            border: 1px solid #cceaf6
                            display: flex
                            align-items: center
                            .left
                                flex: 0 0 75px
                                width: 75px
                                .left-img
                                    background: url('./icon1.png') no-repeat
                                    width: 53px
                                    height: 61px
                                    background-size: 100% 100%
                                    margin: 0 auto
                            .middle
                                flex: 1
                                margin: 0
                                ellipsis()
                                .middle-title
                                    font-size: 14px
                                    width: 100%
                                    ellipsis()
                                .middle-desc
                                    font-size: 12px
                                    color: #888
                                    margin-top: 6px
                            .right
                                flex: 0 0 85px
                                width: 85px
                                .right-img
                                    background: url('http://www.banmago.cn/qunyiguan/images/icon-hudie.png') no-repeat
                                    width: 63px
                                    height: 73px
                                    background-size: 100% 100%
                                    margin: 0 auto
</style>